<template>
  <div>
    <h3>
      发表评论
    </h3>
    <hr>
    <textarea placeholder="请输入评论内容" class="commit" max-length="120"></textarea>
    <mt-button type="primary" size="large">发表评论</mt-button>
    <div class="cmt-list" v-for="item in content" :key="item.link">
      <div class="cmt-item">
        <div class="cmt-header">
          <span>第{{item.copyright}}楼</span>
          <span> 用户名:{{item.copyright}}</span>
          <span>发表时间：{{item.pubdate}}</span>
        </div>
        <div class="cmt-content">{{item.title}}</div>
      </div>
    </div>
    <mt-button type="danger" size="large" plain>加载更多</mt-button>

  </div>
</template>



<script>
export default {
  data() {
    return {
      content: ''
    };
  },
  created() {
    this.axios.post('http://api.komavideo.com/news/list').then(body => {
      this.content = body.data;
    });
  }
};
</script>


<style scoped>
.commit {
  height: 120px;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.1);
}
.cmt-item {
  margin: 10px 0;
}
.cmt-header {
  /* display: flex;
  justify-content: space-around; */
  font-size: 14px;
  margin-bottom: 10px;
}
.cmt-content {
  /* height: 120px; */
  font-size: 12px;
  background: rgba(0, 0, 0, 0.2);
  padding: 5px 0;
  text-indent: 2em;
  border-radius: 5px;
}
</style>
